:root {
    --colorT: #e9dac5; 
    --colorT2: #d2b48c;
    --colorG: #333;
    --colorW: #fff; 
    --color1: var(--colorG); 
    --color2: #ff6347; 
    --color5: #ffa500; 

    --ribbonDottedSize: 2px; 
    --ribbonDotted: var(--ribbonDottedSize) dotted rgba(0, 0, 0, .3);
    --ribbonColor1: var(--color2);
    --ribbonColor2: var(--color5);
    --ribbonColor3: rgba(51, 51, 51, 0.14);
    --ribbonColor4: var(--colorT);
    --ribbonColor5: rgba(51, 51, 51, 0.8); 
}

.ribbon-content {
    position: relative;
    min-height: 7.5em; 
}

    .ribbon-content > [class*=ribbon] {
        position: absolute;
        z-index: 2000; 
        line-height: 2em;
        display: block;
        width: 10em;
        height: 2.5em;
        text-align: center;
        text-decoration: none;
        user-select: none;
    }

        .ribbon-content > [class*=ribbon]::before,
        .ribbon-content > [class*=ribbon]::after {
            content: '';
            position: absolute;
            inset: 0;
            clip-path: polygon(2em 0, 8em 0, 10em 2em, 10em 2.5em, 9.5em 2em, .5em 2em, 0 2.5em, 0 2em);
        }

        .ribbon-content > [class*=ribbon]::before {
            top: .1em;
            height: 1.8em;
            border: var(--ribbonDotted);
            border-left: none;
            border-right: none;
        }

        .ribbon-content > [class*=ribbon]::after {
            z-index: -1;
            background-color: var(--ribbonColor1);
            border-bottom: .5em solid var(--ribbonColor3);
            transition: background-color .2s ease-in-out;
        }

        .ribbon-content > [class*=ribbon] span {
            display: block;
            transform: rotate(180deg);
        }

    .ribbon-content > a[class*=ribbon] {
        transition: color .2s ease-in-out;
    }

        .ribbon-content > a[class*=ribbon]:focus,
        .ribbon-content > a[class*=ribbon]:hover,
        .ribbon-content > a[class*=ribbon]:active {
            color: var(--ribbonColor5);
        }

            .ribbon-content > a[class*=ribbon]:focus::after,
            .ribbon-content > a[class*=ribbon]:hover::after,
            .ribbon-content > a[class*=ribbon]:active::after {
                background-color: var(--ribbonColor2);
            }

    .ribbon-content > [class*=ribbon-top] {
        filter: drop-shadow(0 .5em .5em rgba(0, 0, 0, .1));
    }

        .ribbon-content > [class*=ribbon-top]::after {
            background-image: linear-gradient(to top, rgba(0, 0, 0, .3), rgba(0, 0, 0, .2) 1.25em);
        }

    .ribbon-content > [class*=ribbon-bottom] {
        filter: drop-shadow(0 -.5rem .5rem rgba(0, 0, 0, .1));
    }

        .ribbon-content > [class*=ribbon-bottom]::after {
            background-image: linear-gradient(to top, rgba(0, 0, 0, .2), rgba(0, 0, 0, .3) 1.25em);
        }

    .ribbon-content > .ribbon-top-left {
        top: 0;
        left: 0;
        transform: translate(-2.35em, 1.4em) rotate(-45deg);
    }

    .ribbon-content > .ribbon-top-right {
        top: 0;
        right: 0;
        transform: translate(2.35em, 1.4em) rotate(45deg);
    }

    .ribbon-content > .ribbon-bottom-left {
        bottom: 0;
        left: 0;
        transform: translate(-2.35em, -1.4em) rotate(225deg);
    }

    .ribbon-content > .ribbon-bottom-right {
        bottom: 0;
        right: 0;
        transform: translate(2.35em, -1.4em) rotate(135deg);
    }

.box {
    width: 100%;
    border-radius: .3em;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .2);
}